<script setup lang="ts">
import { reactive, ref } from "vue";
import {
  ElButton,
  ElCard,
  ElCol,
  ElEmpty,
  ElForm,
  ElFormItem,
  ElRow,
  ElSegmented,
  ElSpace,
  ElTag,
} from "element-plus";
import {
  ProInputNumber,
  ProRadioGroup,
  ProSelect,
} from "@/modules/package/form";
import DateRangePicker from "@/components/common/DateRangePicker.vue";

const ruleDateType = [
  { label: "无时间限制", value: 0 },
  { label: "指定时间范围内有效", value: 1 },
  { label: "领取后固定天数", value: 2 },
];

const model = reactive<{
  merchartList: { id: number; title: string }[];
  activityList: { id: number; title: string }[];
  date_type: (typeof ruleDateType)[number]["value"];

  start_date: string;
  end_date: string;

  date_duration?: number;
  merchat_mode: 0 | 1;
}>({
  activityList: [],
  merchartList: [],
  date_type: 0,
  end_date: "",
  start_date: "",
  merchat_mode: 0,
  // date_duration:
});

const options = ["时间规则", "核销规则"];
const value = ref("时间规则");

const modeOptions = [
  { label: "仅选中品牌参与", value: 0 },
  { label: "选中商家不参与", value: 1 },
];

const visibleMerchant = ref(false);


</script>

<template>
  <ElCard header="规则设置">
    <ElForm label-width="7em">
      <ElRow>
        <ElCol :span="20">
          <ElSegmented
            v-model="value"
            :options="options"
            size="large"
            class="w-full"
          />
        </ElCol>
        <ElCol :span="4" v-if="value != '时间规则'" class="text-right">
          <ElButton
            v-if="value == '核销规则'"
            type="primary"
            :round="true"
            @click="visibleMerchant = true"
            >选择品牌
          </ElButton>
        </ElCol>
      </ElRow>

      <div class="mt-6">
        <template v-if="value == '时间规则'">
          <ElFormItem label="规则类型">
            <ProSelect v-model="model.date_type" :options="ruleDateType" />
          </ElFormItem>

          <ElFormItem v-if="model.date_type == 1" label="时间范围">
            <DateRangePicker
              v-model:start="model.start_date"
              v-model:end="model.end_date"
            />
          </ElFormItem>

          <ElFormItem v-if="model.date_type == 2" label="领取后">
            <ProInputNumber
              v-model="model.date_duration"
              :min="0"
              :precision="0"
            />
            <span class="pl-3">天内有效</span>
          </ElFormItem>
        </template>

        <template v-else-if="value == '核销规则'">
          <ElFormItem label="生效模式" prop="merchat_mode">
            <ProRadioGroup
              v-model="model.merchat_mode"
              :options="modeOptions"
            />
          </ElFormItem>

          <ElFormItem label="品牌列表" prop="merchat_mode">
            <div class="text-center w-full">
              <ElEmpty v-if="model.merchartList.length == 0" />
            </div>

            <ElSpace wrap>
              <ElTag
                v-for="(item, index) in model.merchartList"
                :key="item.id"
                closable

                >{{ item.title }}</ElTag
              >
            </ElSpace>
          </ElFormItem>
        </template>
      </div>
    </ElForm>
  </ElCard>
</template>
